import React, { Component } from 'react'
import "../assets/css/Login.css"
import Header from "../components/DefaultHeader"


export default class Login extends Component {
    state = {
        phone: '',
        password: ''
    }
    denglu() {
        const { phone, password } = this.state
        if (phone === '') {
            return alert('手机号不可为空')
        }
        if (password === '') {
            return alert('密码不可为空')
        }
        this.$axios.post('/login', { phone, password }).then(res => {
            console.log(res);
            if (res.code === 200 && res.msg === '登录成功') {
                this.setState({
                    phone: '',
                    password: ''
                })
                localStorage.setItem('loginData', JSON.stringify(res.list))
                this.props.history.push('/uncenter')
            }
        })
    }
    render() {
        const { phone, password } = this.state
        return (
            <div id="login">
                <Header title="会员登录" right_text="注册" right_method={()=>this.props.history.push('/reg')}/>
                <div className="container">
                    <div className="logo"></div>
                    <div className="form">

                        <div className="form-group">
                            <input type="text" placeholder="手机号" value={phone} onChange={(e) => this.setState({ phone: e.target.value.trim() })} />
                        </div>
                        <div className="form-group">
                            <input type="password" placeholder="密码" value={password} onChange={(e) => this.setState({ password: e.target.value.trim() })} />
                        </div>
                        <div className="form-group">
                            <button className="btn-gray" onClick={() => this.denglu()}>登录</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
